<template>
  <div class="home">
    <button @click="lock">锁定</button>
    姓名：<input type="text" v-model="name" /> 年龄：<input
      type="text"
      v-model="age"
    />
    地区：
    <select name="" id="" v-model="city">
      <option value="北京">北京</option>
      <option value="郑州">郑州</option>
      <option value="菏泽曹县">菏泽曹县</option>
    </select>
    <button @click="add">add</button>
    <hr />
    <button @click="remove">选中删除</button>
    <table>
      <tr>
        <th>选择</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>地区</th>
        <th>操作</th>
      </tr>
      <tr v-for="(item, index) in $store.state.list" :key="index">
        <td>
          <input
            type="checkbox"
            v-model="sel"
            :value="item.id"
            :disabled="locks"
          />
        </td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.city }}</td>
        <td><button>编辑</button><button>删除</button></td>
      </tr>
    </table>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  data() {
    return {
      name: "",
      age: "",
      city: "北京",
      sel: [],
      locks: false,
    };
  },
  methods: {
    add() {
      this.$store.commit("add", {
        name: this.name,
        age: this.age,
        city: this.city,
        id: new Date().getTime(),
        //保证id是唯一的，获取的是1970年到现在的毫秒数肯定是唯一
      });
    },
    remove() {
      this.$store.commit("remove", this.sel);
    },
    lock() {
      this.locks = !this.locks;
    },
  },
};
</script>
